<template>
    <view class="car-type-select">
        <picker @change="bindPickerChange" :value="index" :range="CardTypes" range-key="name">
            <view class="u-flex u-flex-center">
                <view class="uni-input">{{ confirmText }}</view>
                <image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/index2/index14.png" mode="">
                </image>
            </view>
        </picker>
    </view>
</template>
<script>
export default {
    props: ['text', 'id','value'],
    data () {
        return {
            lang: this.$i18n.locale,
            index: 0,
            CardTypes: [], //获取车辆类型
        }
    },
    mounted () {
        this.handeleActionSheetList()
    },
    watch: {
        id: 'handeleActionSheetList'
    },
    computed: {
        confirmText () {
            if(this.value){
                return this.CardTypes.find(item => item.id === this.value).name
            }
            return this.text
        }
    },
    methods: {
        // 获取车型 id 是运输方式的id 空运汽运海运，不限
        handeleActionSheetList () {
            let data = {
                type: 'release_transport',
                pid: this.id,
                lang: this.lang
            }
            this.$u.api.basic.getActionSheetList(data).then(res => {
                this.CardTypes = res
            })
        },
        bindPickerChange (e) {
            this.index = e.target.value;
            this.$emit('change', this.CardTypes[this.index]);
        }
    },
}
</script>

<style lang="less" scoped>
.car-type-select {
    width: 100%;
    height: 100%;

    .uni-input {
        color: #999999;
    }
}
</style>
